<template>
    <div class="qilin-QilinHeader">
        <span>{{ownHeaderConfig.title || "标题"}}</span>
        <div class="qilin-QilinHeader-btn">
            <template
                v-for="(item,index) in ownHeaderConfig.buttonConfig"
                :key="'btn-'+index"
            >
                <el-button
                    v-if="!item.isHide"
                    v-bind="item"
                    @click="item.click && item.click()"
                >{{item.btnName || "按钮"}}</el-button>
            </template>
        </div>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    headerConfig:{
        type:Object,
        default(){
            return {
                title:"标题",
                buttonConfig:[
                    {
                        btnName:"按钮"
                    }
                ]
            };
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:headerConfig",]);
// 组件自身的配置项
let ownHeaderConfig=computed({
    get(){
        return propsValue.headerConfig;
    },
    set(val){
        emits("update:headerConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-QilinHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    >span{
        font-size:16px;
        color:rgba(0,0,0,0.85);
    }
    >.qilin-QilinHeader-btn{
        >.el-button:nth-child(1){
            background: rgba(86, 206, 163, 0.14);
            color: #56cea3;
            border: 1px solid #56cea3;
        }
        >.el-button:nth-child(2){
            background: rgba(250, 173, 20, 0.15);
            border: 1px solid #faad14;
            color: #faad14;
        }
        >.el-button:nth-child(3){
            background: rgba(20,140,250,0.15);
            border: 1px solid #148CFA;
            color:#148CFA;
        }
    }
}
</style>
